<template>
  <div>
    <el-form :model="form" label-width="120px">
      <el-form-item v-for="item in computedLabelForm" :key="item.prop" :label="item.label" :prop="item.prop">
        <el-select v-model="form[item.prop as keyof FttrWanForm]">
          <el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

class FttrWanForm {
  /* 传输模式 */
  transmissionMode: string | undefined = '1'
  /* 模式 */
  mode: string | undefined = undefined
  /** 连接名称 */
  connectionName: string | undefined = undefined
  /** 承载业务 */
  business: string | undefined = undefined
  /**绑定选项 */
  bindOption: string | undefined = undefined
  /**dhcp服务器 */
  dhcpServer: string | undefined = undefined
  /**链接方式 */
  linkMode: string | undefined = undefined
  /** 协议版本 */
  protocolVersion: string | undefined = undefined
  /** ip model */
  ipMode: string | undefined = undefined
  /** vlan模式 */
  vlanMode: string | undefined = undefined
  /**mtu */

}

const form = reactive(new FttrWanForm())
const labelForm = [
  {
    label: '传输模式',
    prop: 'transmissionMode',
    type: 'select',
    options: [
      { label: 'Ethernet', value: '1' },
      { label: 'PON', value: '2' },
    ],
  },
  {
    label: '模式',
    prop: 'mode',
    type: 'select',
    hidden: computed(() => {
      return form.transmissionMode === '2'
    }),
    options: [
      { label: 'Route', value: '1' },
      { label: 'Bridge', value: '2' },
    ],
  },
]
const computedLabelForm = computed(() => {
  return labelForm.filter((item) => !item.hidden?.value)
})
</script>
<style scoped lang="scss"></style>
